<template>
	<div class="funds">
		<el-card class="box-card">
			<el-button slot="header" type="primary">
				<span>产品统计</span>
			</el-button>
			<div>
				<div class="block">
					<el-form>
						<el-form-item label="选择日期：" style="display: flex">
							<el-date-picker
								v-model="value2"
								type="daterange"
								align="right"
								unlink-panels
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								size="medium"
								@change="changeStartEnd"
								:editable="false"
								value-format="yyyy-MM-dd"
								format="yyyy-MM-dd"
								:picker-options="pickerOptions"
								ref="homeDate"
							>
							</el-date-picker>
						</el-form-item>
					</el-form>

					<el-table :data="tableData" border style="margin-top: 10px" v-loading="tableLoading">
						<el-table-column prop="typeName" label=""> </el-table-column>
						<el-table-column prop="one" label="新增"> </el-table-column>
						<el-table-column prop="two" label="变更"> </el-table-column>
						<el-table-column prop="three" label="终止"> </el-table-column>
						<el-table-column prop="four" label="清算"> </el-table-column>
					</el-table>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
	import { prodList } from '@/api/productApi/home'
	import { timerConversionDate } from '@/filters'
	import { timerConversionStr } from '@/filters'
	export default {
		data() {
			return {
				value2: [],
				tableLoading: false,
				tableData: [],
				pickerOptions: {
					shortcuts: [
						{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				}
			}
		},

		mounted() {
			this.defaultTimer()
			this.changeStartEnd()
		},

		methods: {
			defaultTimer() {
				this.value2 = [
					new Date(timerConversionStr(this.dateFormatter('yyyyMM', new Date()) + '01')),
					new Date(timerConversionStr(this.dateFormatter('yyyyMMdd', new Date())))
				]
				this.$forceUpdate()
			},

			changeStartEnd() {
				this.tableLoading = true
				const params = {}
				if (this.value2 != null && this.value2.length > 0) {
					params.startTime = timerConversionDate(this.value2[0])
					params.endTime = timerConversionDate(this.value2[1])
				}
				prodList(params).then(res => {
					this.tableLoading = false
					this.tableData = [
						{ typeName: '公募', one: '0', two: '0', three: '0', four: '0' },
						{ typeName: '专户', one: '0', two: '0', three: '0', four: '0' }
					]
					if (res.msgCode === 'Y') {
						const list = res.data.body
						if (list != null && list.length > 0) {
							for (let i = 0; i < list.length; i++) {
								const item = list[i]
								if (!!item.typeName && item.changeType === '1') {
									this.tableData[Number(item.typeName) - 1].one = item.counts
								} else if (!!item.typeName && item.changeType === '2') {
									this.tableData[Number(item.typeName) - 1].two = item.counts
								} else if (!!item.typeName && item.changeType === '3') {
									this.tableData[Number(item.typeName) - 1].three = item.counts
								} else if (!!item.typeName && item.changeType === '4') {
									this.tableData[Number(item.typeName) - 1].four = item.counts
								}
							}
						}
					} else {
						this.$message({ message: res.msgDesc, type: 'error' })
					}
				})
			},

			// 时间格式化
			dateFormatter(fmt, date) {
				var o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
				}
				for (var k in o) {
					if (new RegExp('(' + k + ')').test(fmt)) {
						fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
					}
				}
				return fmt
			}
		}
	}
</script>
<style scoped  lang='scss' >
	.funds {
		padding: 1% 0 1% 1%;
		width: 71%;
		height: 550px;
		::v-deep td {
			padding: 8px 0;
		}
		::v-deep th {
			padding: 8px 0;
		}
	}
	.el-card {
		width: 100%;
		border-radius: 0;
		height: 100%;
	}
	::v-deep .el-card__header {
		padding: 0 0px 0 0px;
		color: white;
		button {
			height: 31px;
			display: flex;
			align-items: center;
			width: 100%;
			border: none;
			border-radius: 0;
			outline: none;
			background-color: #3d78cc !important;
			span {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					width: 50%;
				}
				span:nth-child(2) {
					display: block;
					text-align: right;
				}
			}
		}
	}
	.clearfix:after {
		display: none;
	}
	.el-date-editor {
		::v-deep .el-range-separator {
			padding: 0 !important;
		}
	}
</style>
